<template>
  <div class="order-card" :class="{ completed: order.status === 'completed' }">
    <div class="order-header">
      <span class="order-number">订单号: #{{ order.id }}</span>
      <span class="order-time">{{ order.time }}</span>
    </div>
    <div class="order-items">
      <div v-for="(item, index) in order.items" :key="index" class="order-item">
        <span>{{ item.name }} x {{ item.quantity }}</span>
        <span>¥{{ item.price * item.quantity }}</span>
      </div>
    </div>
    <div class="order-total">总计: ¥{{ calculateTotal }}</div>
    <div class="order-actions" v-if="showActions">
      <button
        v-if="order.status === 'pending'"
        @click="$emit('complete-order', order)"
        class="complete-btn"
      >
        完成订单
      </button>
      <span v-else class="status-tag">已完成</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderItem",
  props: {
    order: {
      type: Object,
      required: true,
    },
    showActions: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    calculateTotal() {
      return this.order.items.reduce(
        (total, item) => total + item.price * item.quantity,
        0
      );
    },
  },
};
</script>

<style scoped>
.order-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.order-card.completed {
  background-color: #f8f8f8;
  opacity: 0.8;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.order-number {
  font-weight: bold;
}

.order-time {
  color: #666;
}

.order-items {
  margin-bottom: 15px;
}

.order-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.order-total {
  font-weight: bold;
  text-align: right;
  margin-bottom: 15px;
}

.order-actions {
  display: flex;
  justify-content: flex-end;
}

.complete-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.status-tag {
  background-color: #9e9e9e;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.complete-btn:hover {
  background-color: #45a049;
}
</style>
